<template>
    <div type="primary" @click="beginlogin" class="login" href="javascript:;">注册账户</div>
        <!-- 弹出的页面内容 -->
        <div id="login-box" :style="log==0?'display:none':'display:block;zIndex:40'">
                <form action="">
                    <label>用户:
                        <input v-model="uname" type="text" placeholder="请输入用户名...">
                    </label>
                    <label>密码:
                        <input v-model="upwd" type="password" placeholder="请输入密码...">
                    </label>
                    <label>确认密码:
                        <input v-model="upwd2" type="password" placeholder="请再次输入密码...">
                    </label>
                    <button type="button" @click="login2">注册</button>
                    <p id="close" @click="close">×</p>
                </form>
            </div>
    
            <div id="back" :style="log==0?'display:none':'display:block'"></div>
    </template>
    
    <script setup>
    import {ref,computed} from 'vue'
    import axios from "axios"
    import router from '../router';

      const log=ref(0);
      let uname;
      let upwd;
      let upwd2;
     var loginBox = document.getElementById("login-box");
    
      const beginlogin=()=>{
        log.value=1
        
      }
      const login2=()=>{
        if(uname == '') {
          message.error('用户名不能为空');
      }else if(upwd == '') {
        message.error('密码不能为空');
      }else if(upwd!=upwd2){
        
        alert('密码重复错误', '注册失败', {
              confirmButtonText: '确定',
              callback: action => {
                uname = '',
                upwd = ''
              }
            })
      }
      else{
        axios.post('http://127.0.0.1/login/register',{
          params: {
            name: uname,
            password: upwd          }
          })
        .then(res => {
          // console.log(res.data.message);
          if(res.data.status == 200) {
            alert('是否返回登录页面', '注册成功', {
              confirmButtonText: '确定',
              callback: action => {
                router.push('/login')
              }
            })
          }else if(res.data.status == 202) {
            alert('用户名已存在', '注册失败', {
              confirmButtonText: '确定',
              callback: action => {
                uname = '',
                upwd = ''
              }
            })
          }else{
            console.log(res.message);
          }
        }).catch(err => {
          console.log('操作失败' + err);
        })
      }
    }



            
      const close=()=>{
                log.value=0;
                //清空input中的内容
                uname="";
                upwd="";
               
            }
    
    </script>
    <style scoped>
.login:hover{
  box-shadow: 0px 0px 20px 5px gray;
}
.login{
        float:right;
      background-color: rgba(0, 0, 0, 0.8);
      width:120px;
      line-height:40px;
      align-items: center;
      display: flex;
      justify-content: center;
      font-size: 16px;
      font-style:unset;
      color:ghostwhite;
      box-shadow: 0px 0px 20px 1px gray;
      margin-top: -65px;
      margin-right: 200px;
      position: relative;
        z-index: 11;
    
    }
    /*登陆框*/
    #login-box{
        margin:0px auto;
    
    position:absolute; left:50%; transform:translate(-50%,-50%);
            float:right;
            padding: 20px;
            display:none;
            width:400px;
            height: 200px;
            position: relative;
            border-radius: 5px;
            position: absolute;
            background-color: #a8a8a8;
            background-image: linear-gradient(0deg, #a8a8a8 88%, #545454 89%, #6d6969 100%);
           
            margin-top: -400px;
            z-index: 200;
        }
        #login-box>form{
            text-align: center;
        }
        #login-box label{
            display: block;
            font-size: 20px;
            margin: 20px 0 0 0;
        }
        #login-box label input{
            width:200px;
            height: 30px;
        }
        #login-box button{
            width:200px;
            height: 30px;
            margin:20px 0 0 0;
            width:90px;
            border-radius: 5px;
        }
        #close{
            font-size:18px;
            position: absolute;
            top:0;
            right: 5px;
            cursor: pointer;
        }
        /*背景*/
        #back{
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: #000;
            opacity: 0.5;
            z-index: 12;
        }
    </style>